<template>
  <div class="error-page min-h-screen flex flex-col">
    <!-- 顶部导航 -->
    <header class="bg-primary py-3 px-4 shadow-md transition-all duration-300">
      <div class="flex items-center justify-between max-w-5xl mx-auto">
        <div class="flex items-center">
          <i class="fa fa-shopping-bag text-white text-xl mr-2"></i>
          <span class="text-white font-bold text-lg">陶小宝</span>
        </div>
        <div class="flex items-center space-x-4">
          <button class="text-white hover:text-white/80 transition-colors">
            <i class="fa fa-search text-lg"></i>
          </button>
          <button class="text-white hover:text-white/80 transition-colors">
            <i class="fa fa-user text-lg"></i>
          </button>
        </div>
      </div>
    </header>

    <!-- 主要内容 -->
    <main class="flex-1 flex flex-col items-center justify-center p-4 text-center relative overflow-hidden">
      <!-- 背景装饰 -->
      <div class="absolute -top-20 -right-20 w-64 h-64 bg-primary/5 rounded-full"></div>
      <div class="absolute -bottom-32 -left-32 w-80 h-80 bg-primary/5 rounded-full"></div>

      <div class="max-w-md w-full mx-auto relative z-10">
        <!-- 404标题区 -->
        <div class="mb-8 relative">
          <h1 class="text-[clamp(4rem,10vw,6rem)] font-bold text-primary mb-4 animate-float">404</h1>
          <div class="absolute -bottom-2 left-1/2 transform -translate-x-1/2 w-32 h-1 bg-primary/20 rounded-full"></div>
          <p class="text-[clamp(1.2rem,3vw,1.8rem)] font-medium text-gray-700 mb-3">页面找不到啦</p>
          <p class="text-gray-500">您访问的页面可能已搬家或暂时迷路了~</p>
        </div>
      </div>
    </main>

    <!-- 页脚 -->
    <footer class="bg-white py-4 px-4 text-center text-gray-500 text-sm shadow-[0_-1px_3px_rgba(0,0,0,0.03)]">
      <p>© 2025 陶小宝 | 用心做好每一份体验</p>
    </footer>
  </div>
</template>

<script>
export default {
  data () {
    return {
      pageTitle: '404 - 页面不存在'
    }
  },
  created () {
    document.title = this.pageTitle
  },
  methods: {
    goHome () {
      this.$router.push('/')
    },
    goBack () {
      this.$router.back()
    }
  }
}
</script>

<style lang="scss" scoped>
:root {
  --primary: #EDC121;
}

.error-page {
  font-family: 'Inter', system-ui, sans-serif;
}

header {
  background-color: var(--primary);
}

main {
  background-color: #FAFAFA;
}

/* 404数字浮动动画 */
.animate-float {
  animation: float 3s ease-in-out infinite;
}

@keyframes float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-8px); }
}

/* 按钮交互优化 */
button {
  outline: none;
  cursor: pointer;
}

/* 增强按钮层次感 */
.bg-primary {
  background-color: var(--primary);
}

.text-primary {
  color: var(--primary);
}
</style>
